<script>
/*
 * @Author: Your name
 * @Date:   2020-06-30 21:19:24
 * @Last Modified by:   Your name
 * @Last Modified time: 2020-07-24 09:32:27
 */
</script>
<template>
    <div id="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
import Bscroll from 'better-scroll';
export default {
    data(){
        return {
            scroll:null
        }
    },
    props:{
        probeType:{
            type: Number,
            default: 0
        },
        pullUpLoad:{
            type: Boolean,
            default: false
        }
    },
    mounted(){
        //1.创建BScroll对象
        this.scroll = new Bscroll(this.$refs.wrapper,{
          click: true,  //滚动区域中的div部分想要给他们加点击事件，必须加click：true属性
          probeType: this.probeType,
          pullUpLoad: this.pullUpLoad
        });
        //2. 监听滚动的位置
        this.scroll.on('scroll',(position) => {
            //把position传出去
            this.$emit('scroll',position);
        });
        
        console.log(this.scroll);
        //3. 监听上拉事件
        if(this.pullUpLoad){
            this.scroll.on('pullingUp',() => {
                this.$emit('pullingUp');
            });
        }
        
    },
    methods:{
        //回到顶部的方法
        scrollTo(x, y, time = 500){
          this.scroll && this.scroll.scrollTo(x, y, time);
        },
        //scroll重新刷新方法，让scroll在每张图片加载完成后会自动计算能够滚动的高度
        scrollRefresh(){
          this.scroll && this.scroll.refresh();
            // console.log('刷新了');
        },
        //scroll上拉加载完成方法，因为scroll上拉加载默认只会监听一次上拉加载，所以必须告诉他上拉加载完成。
        scrollFinish(){
          this.scroll && this.scroll.finishPullUp();
        },
        //scroll滑动的y轴方向的距离
        scrollY(){
          return this.scroll ? this.scroll.y :0;
        }
    } 
}
</script>
<style lang="css">
    #wrapper{

    }
</style>